<template>
  <div class="footCont">
    <div @click="footfn(item)" :class="$route.path==item.url?'footItem_active':'footItem'" :key="index" v-for="(item,index) in footArr">
      <div :class="'iconfont '+item.icon"></div>
      <div class="footVal">{{item.val}}</div>
    </div>
  </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
              footArr:[
                {color:'#6455d4',url:'/home',val:'首页',icon:'icon-shouye-1',active:false},
                {color:'#6455d4',url:'/order',val:'订单',icon:'icon-dingdan',active:false},
                {color:'#6455d4',url:'/user',val:'我的',icon:'icon-xiaolian1',active:true},
              ],
            }
        },
        props: {},
        methods: {
          footfn(item){
            this.$router.push({path:item.url})
          },
        },
        beforeRouteLeave(to,from,next){
          if(to.path=='/order'){
            to.meta.keepAlive = false
          }
          //设置下一个路由的meta,让列表页面缓存,即不刷新
          next()
        },
        mounted() {
        },
        created() {
        },
    }
</script>

<style scoped lang="less">
  .footCont{
    width: 100%;
    position: fixed;
    left: 0;
    z-index: 102;
    bottom: -1px;
    background-color: #fff;
    // border-top: 1px solid #ebebeb;
    // box-shadow: 0 -0.1rem 0.5rem #ebebeb;
    display: flex;
    justify-content: space-between;
    .footItem,.footItem_active{
      width: 34%;
      height: 3rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #999;
      justify-content: center;
      .iconfont{
        width: 1rem;
        height: 1rem;
        font-size: 1rem;
        text-align: center;
        line-height: 1rem;
      }
      .footVal{
        font-size: 0.6rem;
        margin-top: 0.1rem;
      }
    }
    .footItem_active{
      color: #6455d4;
    }
  }
</style>
